import React, {
    PureComponent
} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput,
    StatusBar,
    SafeAreaView,
    Platform,
    BackHandler
} from "react-native";
import LoginSmsScene from "./LoginSmsScene";
import {
    KeyboardAwareScrollView
} from "react-native-keyboard-aware-scrollview";
import LoginTopTabBar from "../../../widget/login/LoginTopTabBar";
import LoginScene from "./LoginScene";
import {
    NavigationActions
} from "react-navigation";

const {
    width
} = Dimensions.get('window')
type Props = {
    navigation: any,
}

export default class LoginViewController extends PureComponent < Props > {
    static navigationOptions = {
        header: null,
    };

    constructor(props) {
        super(props)
        this.state = {
            top_index: 0,
        }
    }

    render() {
        return (
            <SafeAreaView style={{backgroundColor:'white',flex:1}}>
                <KeyboardAwareScrollView>
                    <View style={styles.container}>
                        {this.renderTiao()}
                        <View style={{marginTop:40}}>
                            <Image style={{width:65,height:59,marginTop:24,alignSelf:'center'}}
                                   source={require('../../../../res/img/logo.png')}/>
                            <View style={{marginTop:56}}>
                                <LoginTopTabBar activeTab={this.state.top_index} tabNames={['普通密码登录','动态密码登录',]}
                                                tabs={['普通密码登录','动态密码登录',]} goToPage={(i)=>{
                            this.setState({top_index:i})

                        }}/>
                            </View>
                            <View style={{marginLeft:43,marginRight:43,marginTop:46}}>
                                {this.change_login_scene()}
                            </View>
                        </View>
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        )

    }

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress',
            this.onBackButtonPressAndroid);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress',
            this.onBackButtonPressAndroid);
    }

    onBackButtonPressAndroid = () => {
        //重置根视图，闪屏页=>主界面后销毁掉
        const resetAction = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({
                routeName: 'home'
            })]
        })
        this.props.navigation.dispatch(resetAction)
        return true
    }

    change_login_scene() {
        const {
            push
        } = this.props.navigation.state.params
        if (this.state.top_index == 0) {
            return <LoginScene navigation={this.props.navigation} push={push}/>

        } else {
            return <LoginSmsScene navigation={this.props.navigation} push={push}/>

        }
    }
    renderTiao() {
        const {
            is_mine
        } = this.props.navigation.state.params
        console.log('ssssd',is_mine)
        if (is_mine == false) {
            return <View style={{flexDirection:'row',height:20,marginTop:12}}>
                            <View style={{flex:1}}/>
                            <TouchableOpacity style={{marginRight:17}} onPress={()=>{
                        //重置根视图，闪屏页=>主界面后销毁掉
                        const resetAction = NavigationActions.reset({
                            index: 0,
                            actions: [NavigationActions.navigate({ routeName: 'home'})]})
                        this.props.navigation.dispatch(resetAction)
                    }}>
                                <Text style={{color:'#666666',fontSize:14,fontWeight:'200'}}>跳过</Text>
                            </TouchableOpacity>
                        </View>

        } else {
            return <View/>

        }
    }

}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})